import React, { useEffect, useState } from 'react';
import { Form, Input, Switch, DatePicker, Button, message } from 'antd';
import dayjs from 'dayjs';

import { getById, create, updateById } from '../../apis/task.js';

const TaskForm = ({ formData, listUpdate }) => {
  const [form] = Form.useForm();
  const [showDatePicker, setShowDatePicker] = useState(true);

  // 处理 Switch 状态变化
  const handleSwitchChange = (checked) => {
    setShowDatePicker(checked);
  };

  useEffect(() => {
    getForm();
  }, [formData]);

  async function getForm(){
    if(formData === null){
      setShowDatePicker(true);
      form.resetFields();
    } else if(formData.id){
      const res = await getById(formData.id);
      let {remindTime, content} = res.data;
      setShowDatePicker(!!remindTime);
      remindTime = remindTime ? dayjs(remindTime) : '';
      form.setFieldsValue({
        remindTime, content
      });
    } else {
      form.setFieldsValue(formData);
    }
  }

  const submitForm = async ({remindTime, content}) => {
    remindTime = showDatePicker ? remindTime.format('YYYY-MM-DD HH:mm:ss') : null;
    const id = formData?.id;
    if(id){
      const res = await updateById(id, {
        remindTime, content
      });
      if(res.success){
        message.success('更新成功');
      }
    } else {
      const res = await create({
        remindTime, content
      });
      if(res.success){
        message.success('新增成功');
      }
    }
    listUpdate();
  };

  const validateTime = () => ({
    validator(_, value) {
      if (showDatePicker) {
        if (!value ||
          dayjs().add(3, 'minute').isAfter(value, 'minute')) {
          return Promise.reject('提醒时间至少在当前的3分钟后');
        }
      }
      return Promise.resolve();
    },
  });

  return (
    <Form form={form} layout='vertical' onFinish={submitForm}>
      {/*<Row gutter={2}> /!* gutter 设置列之间的间距 *!/*/}
      {/*  <Col span={3}>*/}
      {/*    /!* 提示时间 *!/*/}
      {/*    <Switch defaultChecked checked={showDatePicker} onChange={handleSwitchChange}/>*/}
      {/*  </Col>*/}
      {/*  {showDatePicker && (*/}
      {/*    <Col span={12}>*/}
      {/*      /!* 选择时间 *!/*/}
      {/*      <Form.Item name='reminderTime' label='' dependencies={['reminderTime']}>*/}
      {/*        <DatePicker showTime format='YYYY-MM-DD HH:mm'/>*/}
      {/*      </Form.Item>*/}
      {/*    </Col>*/}
      {/*  )}*/}
      {/*</Row>*/}
      <Switch defaultChecked checked={showDatePicker} onChange={handleSwitchChange}/>
      {showDatePicker && (
        <Form.Item
          label='提示时间'
          name='remindTime'
          validateTrigger='onBlur'
          rules={[
            validateTime
          ]}
          layout='horizontal'
          colon={false}>
          <DatePicker
            showTime format='YYYY-MM-DD HH:mm'
            disabledDate={(value) => {
              return (value.isBefore(dayjs(), 'day'));
            }}
            placeholder='请选择日期时间'
          />
        </Form.Item>
      )}
      {/*<Form.Item label='提示时间' name='remindTime' layout='horizontal'>*/}
      {/*  <Row gutter={2}>*/}
      {/*    <Switch defaultChecked checked={showDatePicker} onChange={handleSwitchChange}/>*/}
      {/*    <DatePicker showTime format='YYYY-MM-DD HH:mm'/>*/}
      {/*  </Row>*/}
      {/*</Form.Item>*/}

      {/* 任务内容 */}
      <Form.Item
        label='内容'
        name='content'
        validateTrigger='onBlur'
        rules={[
          { required: true, message: '请输入任务内容' },
        ]}
      >
        <Input.TextArea placeholder='输入任务内容' rows={4}/>
      </Form.Item>

      <Form.Item>
        <Button
          type='primary'
          htmlType='submit'
          style={{ width: '100%' }}
        >
          确认
        </Button>
      </Form.Item>
    </Form>
  );
};

export default TaskForm;
